<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
const formData = reactive({
  userName: '',
  phone: undefined,
  imgs: [
    // {
    //   url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
    // }
  ]
})
const formColumns = reactive([
  {
    xType: 'Input',
    label: '用户名',
    prop: 'userName',
    span: 24
  },
  {
    xType: 'InputNumber',
    label: '手机号',
    prop: 'phone',
    span: 24
  },
  {
    xType: 'Upload',
    label: '商品主图',
    prop: 'imgs',
    span: 24
    // aspectRatio: 6 / 9,
    // aspectRatioStr: "6:9"
  }
])
const formRules = reactive({
  userName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  imgs: [{ required: true, message: '请上传图片', trigger: 'change' }]
})
const loading = ref(false)
const baseForm = ref(null)
const handleCreateOrUpdate = () => {
  console.log({ ...formData })
  // baseForm?.value?.formRef.validate((valid: boolean) => {
  //   if (valid) {
  //     console.log({ ...formData })
  //   }
  // })
}
const visible = ref(true)
const open = () => {
  visible.value = true
}
const close = () => {
  visible.value = false
}
// 监听图片是否上传
watch(
  () => formData.imgs,
  (newVal) => {
    if (newVal.length > 0) {
      baseForm?.value?.formRef.clearValidate('imgs')
    }
  },
  { deep: true }
)
defineExpose({
  open
})
</script>

<template>
  <el-dialog title="新增用户" v-model="visible" width="80%">
    <form-com
      :formData="formData"
      :formColumns="formColumns"
      :formRules="formRules"
      :showSearchBtn="false"
      ref="baseForm"
    />
    <template #footer>
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="handleCreateOrUpdate" :loading="loading">确认</el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped></style>
